<template>
  <div class="user-chat">
    <!-- 导航 -->
    <van-nav-bar
      class="app-nav-bar"
      title="小智同学"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航 -->

    <!-- 消息列表 -->
    <van-cell-group class="message-list" ref="message-list">
      <van-cell 
        v-for="(item, index) in messageList"
        :title="item.msg"
        :key="index"  
      />
    </van-cell-group>

    <!-- 发送消息 -->
    <van-cell-group class="send-message-wrap">
      <van-field 
        v-model="message" 
        placeholder="请输入消息" 
        :border="false"
      />
      <van-button  
        type="primary"
        size="small"
        @click="onSend"
      >发送</van-button>
    </van-cell-group>
  </div>
</template>

<script>
import io from 'socket.io-client'
import {setItem, getItem} from '@/utils/storage'

// 建立连接
// const socket = io('http://ttapi.research.itcast.cn/app/socket.io/')
// socket.on('connect', function () {
//   console.log('连接建立成功了');
// })

// // socket.on('event', function (data) {
// // })

// // 断开连接了
// socket.on('disconnect', function () {
//   console.log('断开连接');
// })

// // 发送消息
// // socket.emit('消息类型',消息内容)
// // 接收消息
// // socket.on('消息类型',function (data) {
//   // data消息
// // })

// // 方便调试
// window.socket = socket;

export default {
  name: "UserChat",
  components: {},
  props: {},
  data() {
    return {
      message:'',
      socket: null, //websocket通信对象
      messageList: getItem('chat-messages') || [] //消息列表
    };
  },
  computed: {},
  watch: {
    // 监视存储
    messageList () {
      setItem('chat-messages',this.messageList)

      // 如果你要在操作数据之后立即操作数据影响的视图DOM，那么最好把代码放到 nextTick 函数中
      // 数据改变影响视图更新这件事儿不是立即的
      this.$nextTick(()=> {
        this.scrollToBottom() 
      })
     
    }
  },
  methods: {
    onSend() {
      const data = {
        msg: this.message,
        timestamp: Date.now()
      }
      this.socket.emit('message',data)
      // 把用户发出去的消息存储到数组中
      this.messageList.push(data)
      // 清空输入框
      this.message = ''
    },
    scrollToBottom(){
      const list = this.$refs['message-list']
      list.scrollTop = list.scrollHeight;
    }
  },
  created() {
    // 建立连接
  // const socket = io('http://ttapi.research.itcast.cn/')
  // this.socket = socket;

  // socket.on('connect', () => {
  //   console.log('连接建立成功了');
  // })

  // 断开连接了
  // socket.on('disconnect', () => {
  //   console.log('断开连接');
  // })

  // 发送消息
  // socket.emit('消息类型',消息内容)
  // 接收消息
  // socket.on('消息类型',function (data) {
    // data消息
  // })

  // 监听message事件，接收服务端消
  // socket.on('message', (data) => {
  //   // 把对方发给我的消息放到数组中
  //   this.messageList.push(data)
  // })

  // 方便调试
  // window.socket = socket;
  },
  mounted() {
    this.scrollToBottom()
  },
};
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
.message-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 44px;
  overflow-y: auto;
}
.send-message-wrap {
  display: flex;
  align-items: center;
  padding: 0 14px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  .van-button {
    width: 70px;
  //   margin-bottom: 5px;
  //   margin-top: 5px;
  }
}
</style>